<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="form-box">
            <div class="form-title">添加学校</div>
            <el-form label-width="110px" class="app-content form" :rules="rules" :model="ruleForm" ref="ruleForm">
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">学校信息</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="学校级别" prop="schoolLevel">
                                    <el-select v-model="ruleForm.schoolLevel" placeholder="请选择" style="width:95%" @change='changeSchoolLevel'>
                                        <el-option v-for="item in dataNewId" :key="item.id" :label="item.name" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" v-if="ruleForm.schoolLevel=='1'">
                                <el-form-item label="父校名称" prop="headSchoolName">
                                    <school v-model="ruleForm.headSchoolName" style="width:95%" @change='schoolChange'></school>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="学校名称" prop="schoolName">
                                    <el-popover placement="top-start" trigger="focus" content="字符长度不大于20个">
                                        <el-input v-model="ruleForm.schoolName" placeholder="请输入学校名字" :maxlength="20"  slot="reference" style="width:95%"></el-input>
                                    </el-popover>    
                                </el-form-item>
                            </el-col> 
                            <el-col :span="12">
                                <el-form-item label="详细地址" prop="schoolAddress">
                                    <el-popover placement="top-start" trigger="focus" content="字符长度不大于30个">
                                        <el-input v-model="ruleForm.schoolAddress" placeholder="请输入学校地址" :maxlength="30" slot="reference" style="width:95%"></el-input>
                                    </el-popover>   
                                </el-form-item>
                            </el-col>
                        </el-row>
                    
                        <el-row :gutter="21" style="margin-top:30px;">
                            <el-col :span="8">
                                <el-form-item  label="是否培训机构" prop="isOrganId">
                                    <el-select v-model="ruleForm.isOrganId" placeholder="是否培训机构" style="width:91.5%" @change='changeIsOrganId'>
                                        <el-option v-for="item in ruleForm.isOrgan" :key="item.value" :label="item.name" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" v-if="ruleForm.isOrganId=='0'">
                                <el-form-item label="学校类型" prop="typeSchoolId">
                                    <el-select v-model="ruleForm.typeSchoolId" placeholder="学校类型" style="width:91.5%" @change='changeType'>
                                        <el-option v-for="item in ruleForm.typeSchool" :key="item.schoolTypeId" :label="item.typeName" :value="item.schoolTypeId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" v-if="ruleForm.isOrganId=='0'">
                                <el-form-item label="学年制" prop="yearStstemId">
                                    <el-select v-model="ruleForm.yearStstemId" placeholder="学年制" style="width:91.5%">
                                        <el-option v-for="item in ruleForm.yearStstem" :key="item.typeValue" :label="item.typeName" :value="item.typeValue">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="21">
                            <el-col :span="8">
                                <el-form-item label="所属省" prop='fProvinceId'>
                                    <province v-model="ruleForm.fProvinceId" style="width:91.5%"></province>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="所属市" prop='fCityId'>
                                    <city v-model="ruleForm.fCityId" :province="ruleForm.fProvinceId" style="width:91.5%"></city>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="所属区县" prop='fAreaId'>
                                    <region v-model="ruleForm.fAreaId" :city="ruleForm.fCityId" style="width:91.5%"></region>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">负责人信息</span>
                    </div>
                    <div class="form-content">
                        <el-row  :gutter="21">                   
                            <el-col :span="12">
                                <el-form-item label="真实姓名" prop="realName">
                                    <el-popover placement="top-start" trigger="focus" content="字符长度不大于6个">
                                        <el-input v-model="ruleForm.realName" placeholder="请输入负责人姓名" :maxlength="6" slot="reference" style="width:95%"></el-input>
                                    </el-popover>    
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="手机号" prop="phoneNum">
                                    <el-input v-model="ruleForm.phoneNum"  placeholder="请输入负责人手机号" :maxlength="11" style="width:95%"></el-input>
                                </el-form-item>
                            </el-col>       
                        </el-row>
                    </div>
                </div>
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">科目详细</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="科目添加" prop="addSubject">
                                    <subject v-model="ruleForm.subjectName" style="width:95%" @change='subjectChange'></subject>              
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="已有科目" prop="haveSubject">
                            <div class="subjectKuang">
                                <el-tag :key="tag.name"  v-for="tag in dynamicTags" closable :disable-transitions="false"  @close="handleClose(tag)">{{tag.subjectName}}</el-tag>
                            </div>
                        </el-form-item>
                    </div>
                </div>
                <!-- <div class="form-item">
                    <el-form-item class="footer">
                        <el-button @click="resetForm">取消</el-button>
                        <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
                    </el-form-item>
                </div> -->
                <div class="form-item">
                    <el-row>
                        <el-col :span="24">
                            <div class="footer">
                                <el-button @click="resetForm('ruleForm')">取消</el-button>
                                <el-button type="primary" @click="submitForm('ruleForm')" :loading="loadingBtn">确认</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import {querySchoolType, querySchoolYearByPeriodId, addSchool} from 'api/schoolManage';
import validate from '@/utils/validate';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';
import subject from 'components/SchoolClasss/subject';
import { mapGetters } from 'vuex';

export default{
    name: 'addSchool',
    components: {Levelbar, province, city, region, school, subject},
    data() {
        var judgeSchoolName = (rule, value, callback) => {
            if (value =='') {
                callback(new Error('请输入总校名称'));
            } else if (this.ruleForm.headSchoolId=='') {
                callback(new Error('总校不存在'));
            } else {
                callback();
            }
        };
        return {
            dataNewId: [
                {
                    name: '总校',
                    id: '0'
                },
                {
                    name: '分校',
                    id: '1'
                }
            ],
            schoolLoading: false,
            loadingBtn: false,
            schoolLoadingSub: false,
            ruleForm: {
                fProvinceId: '',
                fAreaId: '',
                fCityId: '',
                province: [],
                findCity: [],
                findArea: [],
                schoolLevel: '0',
                headSchoolId: '',
                headSchoolName: '',
                schoolAddress: '',
                realName: '',
                phoneNum: '',
                isOrganId: '0',
                type: [],
                typeSchool: [],
                typeSchoolId: '',
                yearStstemId: '',
                yearStstem: [],
                schoolNameList: [],
                subjectList: [],
                subject: '',
                schoolName: '',
                subjectName: '',
                subjectId: '',
                typeName: '',
                isOrgan: [
                    {
                        value: '1',
                        name: '是'
                    },
                    {
                        value: '0',
                        name: '否'
                    }
                ]
            },
            dynamicTags: [
                { subjectName: '语文', subjectId: 'ce054a1a-adb9-11e3-9182-74d43580551b' },
                { subjectName: '数学', subjectId: 'a9ef60bd-adba-11e3-9182-74d43580551b' },
                { subjectName: '英语', subjectId: '2abf555c-be4d-11e3-8fcb-c6d9e999865e' }
            ],
            rules: {
                schoolLevel: [
                    {required: true, message: '请选择学校级别', trigger: 'blur'}
                ],
                headSchoolName: [
                    { required: true, validator: judgeSchoolName}
                ],
                schoolName: [
                    { required: true, message: '请输入学校名字', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                    //  { max: 20, min: 1, message: '最大不超过20位汉字' }
                ],
                schoolType: [
                    { required: true, message: '请选择学校类型', trigger: 'blur'}
                ],
                isOrganId: [
                    { required: true, message: '请选择是否培训机构', trigger: 'change' }
                ],
                typeSchoolId: [
                    { required: true, message: '请选择学校类型', trigger: 'change' }
                ],
                yearStstemId: [...validate.required('请选择学年制', 'change')],
                schoolAddress: [
                    { required: true, message: '请输入学校地址', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                ],
                realName: [
                    { required: true, message: '请输入负责人的真实姓名', trigger: 'blur' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}
                ],
                phoneNum: [...validate.phoneRequired()],
                fProvinceId: [
                    { required: true, message: '请选择所在省', trigger: 'change' }
                ],
                fCityId: [
                    { required: true, message: '请输入所在市', trigger: 'change' }
                ],
                fAreaId: [
                    { required: true, message: '请选择所在区县', trigger: 'change' }
                ]

            }
        }
    },
    created() {
        this.getSchoolType(); 
    },
    computed: {
        ...mapGetters([
            'uid'
        ])
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var strSub = '';
                    for (var i = 0;i<this.dynamicTags.length;i++) {
                        strSub+=this.dynamicTags[i].subjectId+',';
                    }
                    strSub = strSub.substring(0, strSub.length-1);
                    this.$confirm('确定要提交吗?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        this.loadingBtn=true;
                        addSchool(
                        this.ruleForm.schoolLevel,
                        this.ruleForm.headSchoolId,
                        this.ruleForm.typeSchoolId,
                        this.ruleForm.typeName,
                        this.ruleForm.schoolName,
                        this.ruleForm.isOrganId,
                        this.ruleForm.yearStstemId,
                        this.ruleForm.fProvinceId,
                        this.ruleForm.fCityId,
                        this.ruleForm.fAreaId,
                        this.ruleForm.schoolAddress,
                        this.ruleForm.realName,
                        this.ruleForm.phoneNum,
                        strSub,
                        ).then(response => {
                            this.loadingBtn=false;
                            this.$message({
                                type: 'success',
                                message: response.data.errorMsg
                            })
                            this.$store.dispatch('UpdateCache', true);// 修改 和查看
                            this.$router.push('schoolManages');
                        }).catch(() => {
                            this.loadingBtn=false;
                        });
                    }).catch(() => {
                        this.$message.info('已取消');
                    });
                } else {
                    return false;
                }
            });
        },
    // 模糊查询父校名称
        schoolChange(val) {
            this.ruleForm.headSchoolId = val
        },
        changeSchoolLevel() {
            this.ruleForm.headSchoolName = '';
        },
        changeIsOrganId(a) {
            this.ruleForm.typeSchoolId = '';
            this.ruleForm.yearStstemId = ''; 
        },
    // 查询学校类型
        getSchoolType() {
            querySchoolType().then(response => {
                this.ruleForm.typeSchool = response.data.content;  
            });
        },
    // 标签删除
        handleClose(tag) {
            this.ruleForm.subject = ''
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },
        changeType(a) {
            querySchoolYearByPeriodId(a).then(response => {
                this.ruleForm.yearStstem = response.data.content;
                this.ruleForm.yearStstemId = response.data.content[0].typeValue;
            });
            let obj = {};
            obj = this.ruleForm.typeSchool.find((item) => {
                return item.schoolTypeId == a;
            });
            this.ruleForm.typeName = obj.typeName;
           
        },
        subjectChange(val) {
            this.ruleForm.subjectId = val;
            for (let i=0;i<this.dynamicTags.length;i++) {
                if (this.ruleForm.subjectName==this.dynamicTags[i].subjectName) {
                    this.$message({
                        type: 'warning',
                        message: '添加科目重复'
                    });
                    this.ruleForm.subjectId = '';
                    this.ruleForm.subjectName = '';
                    return;
                }
            }
            if (val != '') {
                let tag = {
                    subjectName: this.ruleForm.subjectName,
                    subjectId: val
                }
                this.dynamicTags.push(tag)
                this.ruleForm.subjectId = '';
                this.ruleForm.subjectName = '';
            }
        },
    // 跳转
        resetForm() {
            this.$router.push({path: '/schoolManage'});
        }  
    
    }
}
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;

  @mixin showTitle() {
    background: $bgcolor;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
  .form-box {
    padding: 0 50px;
    @include showTitle();
    .form-title {
      padding-top:8px;
      text-align: center;
      font-size: 18px;
      color: #333;
      line-height: 72px;
      font-weight: bold;
      font-family: Microsoft YaHei;
      border-bottom: 1px solid #ddd;
    }
    .form {
      .form-item {
        padding-bottom: 40px;
        .form-item-title {
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
           
          .note-css {
            vertical-align: middle;
            display: inline-block;
            width: 4px;
            height: 14px;
            margin-right: 26px;
            border-left: 3px solid #ff5e2c;
          }
        }
        .subjectKuang{
            padding:5px 5px 40px 5px;
            width:470px;
        }
        .el-tag{
            margin-left:10px;
            background:#f9f9f9;
            color:#444;
        }
        .footer {
          //float: right;
          text-align: center;
          margin-top: 40px;
          margin-left:0px;
        }
      }
    }
  }
}

</style>